import QtQuick 1.0

Rectangle {
    id: stage1
    width: 400
    height: 400
    MouseArea {
        id: mousearea1
        x: 100
        y: 100
        width: 200
        height: 200
        anchors.leftMargin: 20
        anchors.topMargin: 20
        anchors.rightMargin: 20
        anchors.bottomMargin: 20
        anchors.fill: parent
        onClicked: {
            stage1.state = 'Rolling'
            timer1.running = true
        }

        Image {
            id: diceimage
            x: 10
            y: 10
            width: 200
            height: 200
            source: "dice1.png"
            anchors.verticalCenterOffset: 0
            anchors.horizontalCenterOffset: 0
            anchors.centerIn: parent

            Rectangle {
                id: dot2
                x: 30
                y: 30
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot5
                x: 30
                y: 150
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot6
                x: 30
                y: 90
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot4
                x: 150
                y: 30
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot7
                x: 150
                y: 90
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot3
                x: 150
                y: 150
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
            }

            Rectangle {
                id: dot1
                x: 90
                y: 90
                width: 20
                height: 20
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "yellow" }
                    GradientStop { position: 1.0; color: "white" }
                }
                radius: 10
                visible: false
            }
        }
    }

    Text {
        id: text1
        x: 39
        y: 34
        width: 80
        height: 20
        text: "Roll dice by tapping it"
        font.pixelSize: 12
    }

    Timer {
        id: timer1
        interval: 300
        running: false
        repeat: false
        onTriggered: {
            dice1.roll();
            var value = dice1.value();
            if(value == 1)
                stage1.state = 'State1'
            else if (value == 2)
                stage1.state = 'State2'
            else if (value == 3)
                stage1.state = 'State3'
            else if (value == 4)
                stage1.state = 'State4'
            else if (value == 5)
                stage1.state = 'State5'
            else if (value == 6)
                stage1.state = 'State6'
        }
    }

    states: [
        State {
            name: "Rolling"

            PropertyChanges {
                target: mousearea1
                rotation: 180
                scale: .0
            }

            PropertyChanges {
                target: dot3
                visible: false
            }

            PropertyChanges {
                target: dot4
                visible: false
            }

            PropertyChanges {
                target: dot7
                visible: false
            }

            PropertyChanges {
                target: dot2
                visible: false
            }

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot5
                visible: false
            }

            PropertyChanges {
                target: dot1
                visible: false
            }
        },

        State {
            name: "State1"

            PropertyChanges {
                target: dot3
                visible: false
            }

            PropertyChanges {
                target: dot4
                visible: false
            }

            PropertyChanges {
                target: dot7
                visible: false
            }

            PropertyChanges {
                target: dot2
                visible: false
            }

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot5
                visible: false
            }

            PropertyChanges {
                target: dot1
                visible: true
            }

        },
        State {
            name: "State2"

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot4
                visible: false
            }

            PropertyChanges {
                target: dot7
                visible: false
            }

            PropertyChanges {
                target: dot5
                visible: false
            }

        },
        State {
            name: "State3"

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot5
                visible: false
            }

            PropertyChanges {
                target: dot7
                visible: false
            }

            PropertyChanges {
                target: dot4
                visible: false
            }

            PropertyChanges {
                target: dot1
                visible: true
            }

        },
        State {
            name: "State4"

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot7
                visible: false
            }

        },
        State {
            name: "State5"

            PropertyChanges {
                target: dot7
                visible: false
            }

            PropertyChanges {
                target: dot6
                visible: false
            }

            PropertyChanges {
                target: dot1
                visible: true
            }

        },
        State {
            name: "State6"


        }
    ]

    transitions: [
        Transition {
            to: "Rolling"

            PropertyAnimation {
                target: mousearea1
                properties: "scale"
                duration: 300
                easing.type: Easing.InQuad
            }

            // Disables rotation when the dice is "picked up"
            NumberAnimation {
                target: mousearea1
                properties: "rotation"
                to: 0
            }
        },

        Transition {
            PropertyAnimation {
                target: mousearea1
                properties: "rotation"
                duration: 900
                easing.type: Easing.OutElastic
            }

            PropertyAnimation {
                target: mousearea1
                properties: "scale"
                duration: 600
                easing.type: Easing.OutBack
            }
        }

    ]
}

